<template>
    <div id="app">
        <!-- <span :title="title" :class="status" @click="click" ></span> -->
        <div>人像互动墙</div>
        <el-button @click="fullScreen(0)">进入客户端</el-button>
        <el-button @click="fullScreen(1)">进入管理端</el-button>
    </div>
</template>
  
<script>
import request from "../axios/request";
import screenfull from 'screenfull';
export default {
    data() {
        return {
            isFullscreen: false
        }
    },
    methods: {
        fullScreen(type) {
            if (type == 0) {
                if (!screenfull.isEnabled) return alert(`您的设备不支持全屏`);
                screenfull.toggle();
                this.$router.push({
                    name: "display"
                });
                return;
            }
            this.$router.push({
                name: "UserManage"
            });
        },
        change() {
            this.isFullscreen = screenfull.isFullscreen;
        },
        init() {
            if (screenfull.isEnabled) screenfull.on('change', this.change);
        },
        destroy() {
            if (screenfull.isEnabled) screenfull.off('change', this.change);
        }
    },
    created() {
        this.baseURL = request.defaults.baseURL
        this.init();

    },
    computed: {
        status() {
            //这个地方返回的class是我iconfont里的,可以自己找两个图标的class放这里
            return this.isFullscreen ? 'el-icon-copy-document' : 'el-icon-full-screen';
        },
        title() {
            return this.isFullscreen ? '退出全屏' : '进入全屏';
        }
    }
}
</script>
  
<style scoped>
#app {
    width: 100%;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    background-color: aqua;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>
  